<template>
  <q-page class="q-pa-md">
    <div class="q-pb-md text-h5">多语言切换demo
      <span class="text-subtitle1">当前语言{{locale}}</span>
    </div>
    <div class="shadow-2 q-mt-md">
      这个是不用fpsHelper的i18n切换
      <q-table v-model:pagination="$d.paginationInfo" :columns="columnsInfo" :hide-pagination="true"
        :rows="$d.tableData" binary-state-sort
        class="generic-sticky-header-table" color="primary" dense flat separator="cell">
        <template v-slot:body-cell-operation="props">
          <q-td :props="props" auto-width>
            <q-btn class="q-mr-xs btn-in-row" color="primary" dense :label="$t('查看')" no-caps/>
            <q-btn class="btn-in-row" color="primary" dense :label="$t('编辑')" no-caps/>
          </q-td>
        </template>
      </q-table>
    </div>
    <div class="shadow-2 q-mt-md">
      这个是用fpsHelper的i18n切换,这里有些问题,可能需要修改fpsHelper
      <q-table v-model:pagination="$d.paginationInfo" :columns="fpsInfo.columnsInfo" :hide-pagination="true"
        :rows="$d.tableData" binary-state-sort :visible-columns="fpsInfo.visibleColumns"
        class="generic-sticky-header-table" color="primary" dense flat separator="cell">
        <template v-slot:top="props">
          <q-space />
          <table-col-options-cfg v-model:visible-columns="fpsInfo.visibleColumns"
            v-model:table-columns="fpsInfo.columnsInfo" class="q-mx-sm"
            @update-col-options-for-save="fpsAssist.saveColOptions"></table-col-options-cfg>
          <q-btn :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'" :ripple="false"
            :title="props.inFullscreen ? '退出全屏' : '全屏显示'" dense flat @click="props.toggleFullscreen" />
        </template>
        <template v-slot:no-data>
          <div class="full-width items-center justify-center row">
            <q-icon name="error_outline" />
            无数据
          </div>
        </template>
        <template v-slot:body-cell-operation="props">
          <q-td :props="props" auto-width>
            <q-btn class="q-mr-xs btn-in-row" color="primary" dense :label="$t('查看')" no-caps/>
            <q-btn class="btn-in-row" color="primary" dense :label="$t('编辑')" no-caps/>
          </q-td>
        </template>
      </q-table>
    </div>
  </q-page>
</template>

<script lang="ts" setup>

import {useI18n} from 'vue-i18n'
import {reactive} from 'vue'
import {useFpsHelper} from 'src/lib/hooks/fpsHelper'
import {ColumnInfo} from 'src/lib/defs/comm'

// locale是当前的语言，语言名称对应i18n文件下的index.ts文件的key值， t为全局$t的script用法，在setup里没法直接this.$t
const {t, locale} = useI18n({useScope: 'global'})

// 为了试试修改表头,columnsInfo需要是computed，ref和reactive都不行
// let columnsInfo = computed(() => [
//   {
//     label: t('操作'),
//     name: 'operation',
//     field: 'operation',
//     align: 'left',
//     defVisible: true,
//     defOrder: 1
//   },
//   {
//     label: t('键'),
//     name: 'key',
//     field: 'key',
//     align: 'left',
//     defVisible: true,
//     defOrder: 2
//   },
//   {
//     label: t('值'),
//     name: 'value',
//     field: 'value',
//     align: 'left',
//     defVisible: true,
//     defOrder: 3
//   },
//   {
//     label: t('实际显示'),
//     name: 'display',
//     field: 'display',
//     align: 'left',
//     format: (val, row) => {
//       switch (row.type) {
//         case 'base':
//           return t(row.key)
//         case 'placeholder':
//           return t(row.key, {name: row.placeholder})
//       }
//     },
//     defVisible: true,
//     defOrder: 4
//   },
//   {
//     label: t('描述'),
//     name: 'description',
//     field: 'description',
//     align: 'left',
//     format: (val, row) => {
//       return t(row.description)
//     },
//     defVisible: true,
//     defOrder: 5
//   },
// ] as ColumnInfo[])


let columnsInfo: ColumnInfo[] = [
  {
    label: t('操作'),
    name: 'operation',
    field: 'operation',
    align: 'left',
    defVisible: true,
    defOrder: 1
  },
  {
    label: t('键'),
    name: 'key',
    field: 'key',
    align: 'left',
    defVisible: true,
    defOrder: 2
  },
  {
    label: t('值'),
    name: 'value',
    field: 'value',
    align: 'left',
    defVisible: true,
    defOrder: 3
  },
  {
    label: t('实际显示'),
    name: 'display',
    field: 'display',
    align: 'left',
    format: (val, row) => {
      switch (row.type) {
        case 'base':
          return t(row.key)
        case 'placeholder':
          return t(row.key, {name: row.placeholder})
        default:
          return ''
      }
    },
    defVisible: true,
    defOrder: 4
  },
  {
    label: t('描述'),
    name: 'description',
    field: 'description',
    align: 'left',
    format: (val, row) => {
      return t(row.description)
    },
    defVisible: true,
    defOrder: 5
  },
]

const $d = reactive({
  paginationInfo: {
    page: 1,
    rowsPerPage: 0
  },
  // 模拟数据
  tableData: [
    {
      key: '订单',
      value: 'order',
      description: '直接翻译',
      type: 'base'
    },
    {
      key: '不可为空',
      value: '{name} cannot be null',
      description: '使用占位符',
      type: 'placeholder',
      placeholder: 'Id'
    },
    {
      key: '这是,一段.都是。标点-的 话',
      value: "It's, uh, a paragraph. It's all. Punctuation - words",
      description: '直接翻译',
      type: 'base'
    },
  ],
})

const loadListData = function () {
  return
}


const {
  fpsInfo,
  fpsAssist
} = useFpsHelper('/demo/i18ndemo',
  null,
  null,
  null,
  null, columnsInfo,
  null,
  loadListData)

</script>

<style scoped>

</style>
